<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 页面的实际宽高    document.documentElement.scrollWidth    document.documentElement.scrollHeight
        // 页面的可视宽高    document.documentElement.clientWidth    document.documentElement.clientHeight

        //页面被卷去的宽高   document.documentElement.scrollLeft     document.documentElement.scrollTop


        // 盒子自身的宽高
        //     包含边框和内边距的   oBox.offsetWidth / oBox.offsetHeight
        //     包含内边距的        oBox.clientWidth / oBox.clientHeight


        // 盒子的偏移值
        //     盒子距离最近的具有定位的祖先元素的    oBox.offsetLeft / oBox.offsetTop
        //     盒子的边框的宽度        oBox.clientLeft / oBox.clientTop

        //   offsetParent  找到盒子距离最近的具有定位的祖先元素

    </script>

</body>

</html>